<div class="tpl-content-wrapper" xmlns:th="http://www.w3.org/1999/xhtml">
    <div class="row-content am-cf">
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title  am-cf">用户管理</div>
                    </div>
                    <div class="widget-body  am-fr">

                        <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                            <div class="am-form-group">
                                <div class="am-btn-toolbar">
                                    <div class="am-btn-group am-btn-group-xs">
                                        <button type="button" class="am-btn am-btn-default am-btn-success"
                                                onclick="exportPerson()"><span class="am-icon-plus"></span> 导出
                                        </button>
                                        <button type="button" class="am-btn am-btn-default am-btn-secondary"
                                                onclick="del()"><span class="am-icon-trash-o"></span> 导入
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">

                        </div>
                        <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
                            <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                                <input type="text" class="am-form-field " id="userName" th:value="${name}">
                                <span class="am-input-group-btn">
                                         <button class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search" onclick="selectUserByName()"  type="button" ></button>
                                    </span>
                            </div>
                        </div>

                        <div class="am-u-sm-12">

                            <div style="overflow-x:scroll">
                                <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black "
                                       id="example-r">


                                    <thead>
                                    <tr>
                                        <th width="10%">
                                            <button onclick="reSelect()"
                                                    class="am-btn  am-btn-default am-btn-success tpl-table-list-field"
                                                    type="button">反选
                                            </button>
                                        </th>
                                        <th>用户ID</th>
                                        <th>账号</th>
                                        <th>密码</th>
                                        <th>手机号</th>
                                        <th>昵称</th>
                                        <th>性别</th>
                                        <th>邮箱</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="gradeX" th:each= "user : ${users.list}" >
                                            <td><input type="checkbox" name="persons" th:value="${user.userId}"></td>
                                            <th th:text="${user.userId}"></th>
                                            <th th:text="${user.userAccount}"></th>
                                            <th th:text="${user.userPassword}">密码</th>
                                            <th th:text="${user.userPhone}">手机号</th>
                                            <th th:text="${user.userNickname}">昵称</th>
                                            <th th:text="${user.userSex}">性别</th>
                                            <th th:text="${user.userEmail}">邮箱</th>
                                            <td>
                                                <div class="tpl-table-black-operation">
                                                    <a href="javascript:" data-toggle="modal" th:data-target="'#'+${user.userId}" >更多信息</a>

                                                    <div class="modal fade" th:id="${user.userId}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 300px">
                                                        <div class="modal-dialog">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                                    <h4 class="modal-title" id="myModalLabel">更多信息</h4>
                                                                </div>
                                                                <div class="modal-body">
                                                                    <h5 th:text="'真实姓名:'+${user.userRealname}"></h5>
                                                                    <h5 th:text="'身份证号:'+${user.userIdcard}"></h5>
                                                                    <h5 th:text="'注册时间:'+${#dates.format(user.userRegistertime,'yyyy-MM-dd')}"></h5>
                                                                    <h5 th:text="'支付密码:'+${user.userPaypwd}"></h5>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                                </div>
                                                            </div><!-- /.modal-content -->
                                                        </div><!-- /.modal -->
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="am-u-lg-12 am-cf">
                                <div class="am-u-lg-3">
                                    跳转至:<input type="number" id="customerPages" class="selectOption">/ 页
                                    <span>
                                            <button class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search" th:onclick="goCustomer()"
                                                    type="button"></button>
                                        </span>
                                </div>

                                <div class="am-fr">

                                    <ul class="am-pagination tpl-pagination">
                                        <li ><a href="javascript:" th:onclick="|gopage('${users.navigateFirstPage}')|">首页</a></li>
                                        <li  th:if="users.hasPreviousPage"><a href="javascript:" th:onclick="|gopage('${users.prePage}')|">«</a></li>
                                        <li th:each="pageNum:${#numbers.sequence(1,users.pages)}">
                                            <a th:text="${pageNum}" th:onclick="|gopage('${pageNum}')|"></a>
                                        </li>
                                        <li th:if="users.hasNextPage"><a href="javascript:" th:onclick="|gopage('${users.nextPage}')|">»</a></li>
                                        <li><a href="javascript:" th:onclick="|gopage('${users.navigateLastPage}')|">尾页</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>



</div>
<script>
    //条件查询
    function selectUserByName() {
        $.ajax({
            url:"/p2p/userManage/getAllUser",
            data:{"name":$("#userName").val()},
            type:"get",
            dataType:"html",
            success:function (data) {
                $("#content").html(data)
            }
        })


    }
    //导出人员信息
    function exportPerson() {
        //alert("导出人员管理")
        var pros = $('input[name="persons"]:checked');
        if (pros.html() == undefined) {
            alert('请先选择人员')
            return;
        }
        var num = [];
        for (var i = 0; i < pros.length; i++) {
            var pro = pros.eq(i);
            num.push(pro.val());
        }
        alert(num)

       // location.href="/p2p/userManage/exportCustomer";
    }
    //页面跳转
    function gopage(pageNum) {
        $.ajax({
            url:"/p2p/userManage/getAllUser",
            data:{"name":$("#userName").val(),"pageNum":pageNum},
            type:"get",
            dataType:"html",
            success:function (data) {
                $("#content").html(data)
            }
        })
    }
    function goCustomer() {

        $.ajax({
            url:"/p2p/userManage/getAllUser",
            data:{"name":$("#userName").val(),"pageNum":$("#customerPages").val()},
            type:"get",
            dataType:"html",
            success:function (data) {
                $("#content").html(data)
            }
        })
    }
</script>
